<template>
	<view class="post-index">
		<view class="content flex align-item_center justify-content_space-between" @click="review">
			<view>
				{{props.item.content}}
			</view>
			<view v-if="!props.showImg">
				<image v-if="isImageOrVideoUrl(props.item.fishImg.split(',')[0]) === 'image'" class="rightMedia"
					mode="aspectFill" style="" :src="props.item.fishImg.split(',')[0]"></image>
				<video v-else :style="{'object-fit': 'fill','width':'inherit','height':'inherit','border-radius':'16rpx'}"
					object-fit="cover" :src="props.item.fishImg.split(',')[0]" mode="aspectFill" />
			</view>
		</view>
		<view class="time" v-if="props.time">{{dayjs(props.item.createTime).format('YYYY.MM.DD HH:mm:ss')}}</view>
		<view class="items" v-if="props.showImg">
			<view class="flex" v-for="(item,index) in chunkArray(props.item.fishImg.split(','),3)" :key="index"
				:class="{'justify-content_space-between':item.length>=3}">
				<view v-for="(child,childIndex) in item" :key="childIndex">
					<view class="flex align-item_center item"
						:style="{'margin-right':item.length<=2?props.right:'0',width:props.size,height:props.size}">
						<up-image v-if="isImageOrVideoUrl(child) === 'image'" :src="child" mode="aspectFill" :width="props.size"
							:height="props.size" radius='16rpx' @click="preview(props.item.fishImg)" />
						<video v-else :style="{'object-fit': 'fill','width':'inherit','height':'inherit','border-radius':'16rpx'}"
							object-fit="cover" :src="child" mode="aspectFill" />
					</view>
				</view>
			</view>
		</view>
		<view class="operation flex align-item_center justify-content_space-between" v-if="props.operation">
			<view class="item flex align-item_center" @click="review">
				<image src="https://ryyf.wangjintech.cn/static/image/stragy/2.png" />
				<text>{{props.item.commentCount}}</text>
			</view>
			<view class="item flex align-item_center" @click="changeGoodStatus">
				<image v-if="props.item.goodStatus" src="https://ryyf.wangjintech.cn/static/image/stragy/6.png" />
				<image v-else src="https://ryyf.wangjintech.cn/static/image/stragy/4.png" />
				<text>{{props.item.goodCount}}</text>
			</view>
			<view class="item flex align-item_center relative">
				<button class="absolute" open-type="share" @click="shareUser">分享</button>
				<image src="https://ryyf.wangjintech.cn/static/image/stragy/3.png" />
				<text>{{props.item.shareCount}}</text>
			</view>
			<view class="item flex align-item_center" @click="changeCollectStatus">
				<image v-if="props.item.collectStatus" src="https://ryyf.wangjintech.cn/static/image/stragy/7.png" />
				<image v-else src="https://ryyf.wangjintech.cn/static/image/stragy/5.png" />
				<text>{{props.item.collectCount}}</text>
			</view>
			<view class="item flex align-item_center" @click="delPost" v-if="props.power">
				<up-icon name="trash-fill" size="38rpx" color="#c12c1f"></up-icon>
			</view>
		</view>
	</view>
</template>

<script setup>
	import dayjs from "dayjs"
	import openApi from "@/api/biz/open";
	import {
		msg,
		isImageOrVideoUrl
	} from "@/utils/tool.js"
	import {
		chunkArray
	} from "@/utils/tool.js"

	const props = defineProps({
		power: {
			type: Boolean,
			default: false
		},
		showImg: {
			type: Boolean,
			default: true
		},
		self: {
			type: Boolean,
			default: false
		},
		item: {
			type: Object,
			default: {}
		},
		time: {
			type: Boolean,
			default: false
		},
		operation: {
			type: Boolean,
			default: true
		},
		right: {
			type: String,
			default: "25rpx"
		},
		size: {
			type: String,
			default: "200rpx"
		}
	})

	const emit = defineEmits(["changeGoodStatus", 'changeCollectStatus', 'del'])

	const delPost = () => {
		emit("del", {
			id: props.item.id
		})
	}

	function preview(child) {
		let imgs = child.split(',').filter(item => isImageOrVideoUrl(item) === 'image')
		uni.previewImage({
			urls: imgs,
		});
	}

	function shareUser() {
		openApi.createShareRecord(props.item.id)
	}

	function changeCollectStatus() {
		if (props.item.collectStatus) {
			openApi.deleteCollect(props.item.id).then(res => {
				if (res.code === 0) {
					msg("已取消收藏")
					emit('changeCollectStatus', props.item.id)
				}
			})
		} else {
			openApi.createUserCollect(props.item.id).then(res => {
				if (res.code === 0) {
					msg("已设为收藏")
					emit('changeCollectStatus', props.item.id)
				}
			})
		}
	}

	function changeGoodStatus() {
		if (props.item.goodStatus) {
			openApi.deleteGoodRecord(props.item.id).then(res => {
				if (res.code === 0) {
					msg("已取消喜欢")
					emit('changeGoodStatus', props.item.id)
				}
			})
		} else {
			openApi.createGoodRecord(props.item.id).then(res => {
				if (res.code === 0) {
					msg("已设为喜欢")
					emit('changeGoodStatus', props.item.id)
				}
			})
		}
	}

	function review() {
		const pages = getCurrentPages();
		const currentPage = pages[pages.length - 1];
		const url = "contribute/details/index"
		if (currentPage.route === url) return;
		uni.navigateTo({
			url: `/${url}?id=${props.item.id}&self=${props.self}`
		})
	}
</script>

<style scoped lang="scss">
	.rightMedia {
		width: 300rpx;
		height: 200rpx;
		flex-shrink: 0;
		margin-left: 20rpx;
		border-radius: 10rpx;
	}

	.operation {
		margin-top: 25rpx;

		.item {
			button {
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				opacity: 0;
			}

			text {
				font-weight: 400;
				font-size: 24rpx;
				color: #FFFFFF;
				opacity: 0.5;
			}

			image {
				width: 32rpx;
				height: 32rpx;
				margin-right: 10rpx;
			}
		}
	}

	.post-index {
		.time {
			font-weight: 500;
			font-size: 20rpx;
			color: #EDFAFF;
			opacity: 0.5;
			margin-top: 20rpx;
		}

		.items {
			.item {
				margin-top: 25rpx;
				width: 200rpx;
				height: 200rpx;

				image {
					width: inherit;
					height: inherit;
					border-radius: 16rpx;
				}
			}
		}

		.content {
			font-weight: 500;
			font-size: 30rpx;
			color: #EDFAFF;
			line-height: 48rpx;
		}
	}
</style>